var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all) __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if ((from && typeof from === 'object') || typeof from === 'function') {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, {
          get: () => from[key],
          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable,
        });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (
  (target = mod != null ? __create(__getProtoOf(mod)) : {}),
  __copyProps(
    // If the importer is in node compatibility mode or this is not an ESM
    // file that has been converted to a CommonJS file using a Babel-
    // compatible transform (i.e. "__esModule" has not been set), then set
    // "default" to the CommonJS "module.exports" for node compatibility.
    isNodeMode || !mod || !mod.__esModule
      ? __defProp(target, 'default', { value: mod, enumerable: true })
      : target,
    mod,
  )
);
var __toCommonJS = (mod) => __copyProps(__defProp({}, '__esModule', { value: true }), mod);

// src/ImageSliderVerify/index.tsx
var ImageSliderVerify_exports = {};
__export(ImageSliderVerify_exports, {
  default: () => ImageSliderVerify,
});
module.exports = __toCommonJS(ImageSliderVerify_exports);
var import_icons = require('@ant-design/icons');
var import_antd = require('antd');
var import_react = __toESM(require('react'));
var import_enums = require('./enums');
var import_index = require('./index.less');
var import_utils = require('./utils');
function ImageSliderVerify({
  imageUrl,
  shadowSize = 50,
  imageWidth = 300,
  imageHeight = 300,
  onSuccess,
  onFail,
  onReload,
}) {
  const shadowCanvasRef = (0, import_react.useRef)(null);
  const fragmentCanvasRef = (0, import_react.useRef)(null);
  const imageStatusRef = (0, import_react.useRef)(import_enums.IMAGE_STATUS.LOADING);
  const prevMovingRef = (0, import_react.useRef)({
    x: 0,
  });
  const currMovingRef = (0, import_react.useRef)();
  const [offset, setOffset] = (0, import_react.useState)({
    offsetX: 0,
    offsetY: 0,
  });
  const [currX, setCurrX] = (0, import_react.useState)(0);
  const reset = (0, import_react.useCallback)(() => {
    imageStatusRef.current = import_enums.IMAGE_STATUS.LOADING;
    prevMovingRef.current = {
      x: 0,
    };
    currMovingRef.current = void 0;
    setOffset({
      offsetX: 0,
      offsetY: 0,
    });
    setCurrX(0);
  }, []);
  const renderImage = (0, import_react.useCallback)(() => {
    reset();
    const image = new Image();
    image.addEventListener('load', () => {
      var _a, _b;
      const shadowCanvasCtx = (_a = shadowCanvasRef.current) == null ? void 0 : _a.getContext('2d');
      const fragmentCanvasCtx =
        (_b = fragmentCanvasRef.current) == null ? void 0 : _b.getContext('2d');
      if (!shadowCanvasCtx || !fragmentCanvasCtx) return;
      shadowCanvasCtx.clearRect(0, 0, shadowSize, shadowSize);
      fragmentCanvasCtx.clearRect(0, 0, shadowSize, shadowSize);
      const styleIndex = Math.floor(Math.random() * 16);
      (0, import_utils.createClipPath)(shadowCanvasCtx, shadowSize, styleIndex);
      (0, import_utils.createClipPath)(fragmentCanvasCtx, shadowSize, styleIndex);
      const shadowPosition = {
        x: Math.floor(shadowSize + (imageWidth - 2 * shadowSize) * Math.random()),
        y: Math.floor((imageHeight - shadowSize) * Math.random()),
      };
      fragmentCanvasCtx.drawImage(
        image,
        shadowPosition.x,
        shadowPosition.y,
        shadowSize,
        shadowSize,
        0,
        0,
        shadowSize,
        shadowSize,
      );
      shadowCanvasCtx.fillStyle = 'rgba(0, 0, 0, 0.8)';
      shadowCanvasCtx.fill();
      shadowCanvasCtx.restore();
      fragmentCanvasCtx.restore();
      setOffset({ offsetX: shadowPosition.x, offsetY: shadowPosition.y });
      imageStatusRef.current = import_enums.IMAGE_STATUS.READY;
    });
    image.src = imageUrl;
  }, [reset]);
  (0, import_react.useEffect)(() => {
    renderImage();
  }, [imageUrl]);
  const reload = (0, import_react.useCallback)(() => {
    var _a, _b;
    if (
      imageStatusRef.current !== import_enums.IMAGE_STATUS.READY &&
      imageStatusRef.current !== import_enums.IMAGE_STATUS.MATCH
    )
      return;
    const shadowCanvasCtx = (_a = shadowCanvasRef.current) == null ? void 0 : _a.getContext('2d');
    const fragmentCanvasCtx =
      (_b = fragmentCanvasRef.current) == null ? void 0 : _b.getContext('2d');
    if (!shadowCanvasCtx || !fragmentCanvasCtx) return;
    shadowCanvasCtx.clearRect(0, 0, shadowSize, shadowSize);
    fragmentCanvasCtx.clearRect(0, 0, shadowSize, shadowSize);
    reset();
    onReload();
  }, [onReload, reset, renderImage]);
  const handleMoveStart = (0, import_react.useCallback)((x) => {
    if (imageStatusRef.current !== import_enums.IMAGE_STATUS.READY) return;
    currMovingRef.current = {
      x,
    };
  }, []);
  const handleMouseDown = (0, import_react.useCallback)(
    (e) => {
      handleMoveStart(e.clientX);
    },
    [handleMoveStart],
  );
  const handleTouchStart = (0, import_react.useCallback)(
    (e) => {
      handleMoveStart(e.touches[0].pageX);
    },
    [handleMoveStart],
  );
  const handleMove = (0, import_react.useCallback)((x) => {
    var _a;
    if (imageStatusRef.current !== import_enums.IMAGE_STATUS.READY || !currMovingRef.current)
      return;
    const distance = x - currMovingRef.current.x;
    let currX2 = ((_a = prevMovingRef.current) == null ? void 0 : _a.x) + distance;
    const minX = 0;
    const maxX = imageWidth - shadowSize;
    currX2 = currX2 < minX ? 0 : currX2 > maxX ? maxX : currX2;
    requestAnimationFrame(() => {
      setCurrX(currX2);
    });
  }, []);
  const handleMouseMove = (0, import_react.useCallback)(
    (e) => {
      handleMove(e.clientX);
    },
    [handleMove],
  );
  const handleTouchMove = (0, import_react.useCallback)(
    (e) => {
      handleMove(e.touches[0].pageX);
    },
    [handleMove],
  );
  const handleMoveEnd = (0, import_react.useCallback)(() => {
    if (imageStatusRef.current !== import_enums.IMAGE_STATUS.READY || !currMovingRef.current)
      return;
    currMovingRef.current = void 0;
    prevMovingRef.current = { x: currX };
    const isMatch = Math.abs(currX - (offset.offsetX ?? 0)) < 5;
    if (isMatch) {
      imageStatusRef.current = import_enums.IMAGE_STATUS.MATCH;
      setCurrX(offset.offsetX ?? 0);
      import_antd.message.success('验证成功');
      onSuccess == null ? void 0 : onSuccess();
    } else {
      const timer = setTimeout(() => {
        prevMovingRef.current = {
          x: 0,
        };
        setCurrX(0);
        clearTimeout(timer);
      }, 1e3);
      import_antd.message.error('验证失败');
      onFail == null ? void 0 : onFail();
    }
  }, [currX, offset, onSuccess, onFail]);
  return /* @__PURE__ */ import_react.default.createElement(
    'div',
    { className: 'szzj-image-slider-verify', style: { width: imageWidth } },
    /* @__PURE__ */ import_react.default.createElement(
      'div',
      {
        className: 'image-container',
        style: { height: imageHeight, backgroundImage: `url("${imageUrl}")` },
      },
      /* @__PURE__ */ import_react.default.createElement('canvas', {
        ref: shadowCanvasRef,
        className: 'canvas',
        width: shadowSize,
        height: shadowSize,
        style: { left: offset.offsetX, top: offset.offsetY },
      }),
      /* @__PURE__ */ import_react.default.createElement('canvas', {
        ref: fragmentCanvasRef,
        className: 'canvas',
        width: shadowSize,
        height: shadowSize,
        style: { top: offset.offsetY, left: currX },
      }),
    ),
    /* @__PURE__ */ import_react.default.createElement(
      'div',
      { className: 'reload-container', onClick: reload },
      /* @__PURE__ */ import_react.default.createElement(import_icons.ReloadOutlined, {
        className: 'reload-icon',
      }),
      /* @__PURE__ */ import_react.default.createElement(
        'span',
        { className: 'reload-tips' },
        '刷新验证',
      ),
    ),
    /* @__PURE__ */ import_react.default.createElement(
      'div',
      { className: 'slider-container', onMouseLeave: handleMoveEnd },
      /* @__PURE__ */ import_react.default.createElement(
        'div',
        { className: 'slider-bar' },
        '拖动滑块完成拼图',
      ),
      /* @__PURE__ */ import_react.default.createElement(
        'div',
        {
          className: 'slider-button',
          onTouchStart: handleTouchStart,
          onTouchMove: handleTouchMove,
          onTouchEnd: handleMoveEnd,
          onMouseDown: handleMouseDown,
          onMouseMove: handleMouseMove,
          onMouseUp: handleMoveEnd,
          style: {
            left: currX + 'px',
          },
        },
        /* @__PURE__ */ import_react.default.createElement(import_icons.MenuUnfoldOutlined, {
          style: { textAlign: 'center', lineHeight: '44px', width: '44px' },
        }),
      ),
    ),
  );
}
